<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>QuizMe</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <script src="../js/text.js"></script> -->
    <script src="../js/questionmanage.js"></script>
    <script src="../js/simpleajax.js"></script>

    <link href="../css/close.css" rel="stylesheet">
    <link href="../include/bootstrap/css/bootstrap.css" rel="stylesheet">

</head>

<body>

    <body class="is-preload">
        <div id="page-wrapper">
            <!-- Header  导航栏 -->
            <header id="header">
                <nav id="nav" class="navbar navbar-expand-lg navbar-light bg-light">
                    <a class="navbar-brand" href="#">QuizMe</a>
                    <div class="collapse navbar-collapse" id="navbarNav">
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link" href="../index.html">Home</a>
                            </li>

                            <li class="nav-item">
                                <a class="nav-link" href="../html/choose.html" style="text-decoration: none">Quiz
                                    Now</a>
                            </li>

                            <li id="login" class="nav-item">
                                <a class="nav-link" href="../html/login.html" style="text-decoration: none">Login
                                    Now</a>
                            </li>
                            <li id="login-out" class="nav-item">
                                <a class="nav-link" href="../html/logout.html" style="text-decoration: none">Login out
                                    Now</a>
                            </li>
                            <li id="profile" class="nav-item">
                                <a class="nav-link" href="../html/personal.html" style="text-decoration: none">Personal
                                    information</a>
                            </li>
                        </ul>
                    </div>

                </nav>
            </header>
            <div class="alert alert-secondary" style="text-align: center;">
                <h2 id="title4">Here is the question list:</h2>
                <p>Total number of records: <span id="count">0</span></p>
            </div>
            <div id="record">
                <div class="row">
                    <div class="col-4">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">Add New Question </h5>
                                <p class="card-text">Click button to add new question</p>
                                <button class="btn btn-primary" onclick='add()'>Add</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-8">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">Search Question</h5>
                                <div id="selector">
                                    <div id="box" style="display: flex;">
                                        <form style="display: inline-block">
                                            <div style="display: inline-block; margin-left: 10px;">
                                                Category
                                                <br>
                                                <div style="position:relative;">
                                                    <select id="category_select" class="form-control">

                                                    </select>
                                                </div>
                                            </div>
                                            <div style="display: inline-block; margin-left: 10px;">
                                                Property
                                                <br>
                                                <select id="Property" name="creator" form="form" class="form-control">
                                                    <option value=0>Public</option>
                                                    <option value=1>Private</option>
                                                    <option value=2>Mixed</option>
                                                </select>
                                        
                                            </div>
                  
                                            <div style="display: inline-block; margin-left: 10px;">
                                                Difficulty
                                                <br>
                                                <select name="level" form="form" id="difficulty_level"
                                                    class="form-control">
                                                    <option value="">all</option>
                                                    <option value=1>easy</option>
                                                    <option value=2>medium</option>
                                                    <option value=3>hard</option>
                                                </select>
                                            </div>
                                            <div style="display: inline-block; margin-left: 10px;">
                                                KeyWord
                                                <br>
                                                <input type="text" id="tag" class="form-control">
                                            </div>


                                            <div style="display: inline-block; margin-left: 10px;">
                                                <input type="button" value="Search"
                                                    class="btn btn-primary" onclick="search()"></div>
                                        </form>


                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                </div>



                <div id="record">

                    <div id="bottom">
                        <table id="table" class="table table-hover">
                            <hr>
                            <thead class="thead-light">
                                <tr>
                                    <th>Category</th>
                                    <th>Level</th>
                                    <th>PublicOrNot</th>
                                    <th>Question</th>
                                    <th>Answer</th>
                                    <th></th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody id="tBody"></tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>
    </body>
    <div id="footer">
        Tianjin University TIEI &copy; 2023
    </div>
</body>

</html>